
$(function () {
    chart_echarts_1();
    chart_echarts_2();
    chart_echarts_3();
    chart_echarts_4();

    function chart_echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartecharts1'));

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            color:['#A6A6A6','#1cc09f'],
            toolbox: {

                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            legend: {
                orient: "horizontal",
                left: "20%",
                data: ['minmoney','maxmoney',]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true,
                        axisTick: { //关键设置，坐标轴刻度也不显示
                            show: false
                        },
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: { //关键设置，不显示X轴线条
                        show: false
                    },
                }
            ],
            series: [
                {
                    name: 'minmoney',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: 'maxmoney',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }
            ]
        };

        // 定义x、y轴数据数组
        var searchURL = window.location.search;
        searchURL = searchURL.substring(1, searchURL.length);
        var chart = searchURL.split("=")[1];
        var workareas=[];
        var avg_minmoneys=[];
        var avg_maxmoneys=[];
        //请求后台数据
        $.ajax({
            type : "post",
            async : true,
            url: "/chart/workarea-money/"+chart,
            dataType : "json",
            contentType: "application/json",
            success: function(res){
                console.log(res);
                for (var i = 0; i < res.length ; i++) {
                    workareas.push(res[i].workarea);
                    avg_minmoneys.push(res[i].avg_minmoney);
                    avg_maxmoneys.push(res[i].avg_maxmoney);
                }
                myChart.setOption({
                    xAxis: {
                        data: workareas
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: 'minmoney',
                        data: avg_minmoneys
                    },
                        {
                            name: 'maxmoney',
                            data: avg_maxmoneys
                        }]
                });
            }
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function chart_echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartecharts2'));

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                orient: "horizontal",
                left: "12%",
                data: ['minmoney','avgmoney','maxmoney',]
            },
            color:['#A6A6A6','#1cc09f'],
            toolbox: {
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: { //关键设置，不显示X轴线条
                        show: false
                    }
                },
            ],
            series: [
                {
                    name: 'Minmoney',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    smooth: true,
                    lineStyle:{
                        normal:{
                            width: 3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#000000',//拐点边框颜色
                            borderWidth: 1//拐点边框大小
                        }
                    },
                    data: []
                },
                {
                    name: 'Avgmoney',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    smooth: true,
                    lineStyle:{
                        normal:{
                            width: 3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#000000',//拐点边框颜色
                            borderWidth: 1//拐点边框大小
                        }
                    },
                    data: []
                },
                {
                    name: 'Maxmoney',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    smooth: true,
                    lineStyle:{
                        normal:{
                            width: 3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#000000',//拐点边框颜色
                            borderWidth: 1//拐点边框大小
                        }
                    },
                    data: []
                },
            ]
        };
        // 定义x、y轴数据数组
        var searchURL = window.location.search;
        searchURL = searchURL.substring(1, searchURL.length);
        var chart = searchURL.split("=")[1];
        var experiences=[];
        var avg_minmoneys=[];
        var avg_avgmoneys=[];
        var avg_maxmoneys=[];
        //请求后台数据
        $.ajax({
            type : "post",
            async : true,
            url: "/chart/experience-money/"+chart,
            dataType : "json",
            contentType: "application/json",
            success: function(res){
                console.log(res);
                for (var i = 0; i < res.length ; i++) {
                    experiences.push(res[i].experience);
                    avg_minmoneys.push(res[i].avg_minmoney);
                    avg_avgmoneys.push(res[i].avg_avgmoney);
                    avg_maxmoneys.push(res[i].avg_maxmoney);
                }
                myChart.setOption({
                    xAxis: {
                        // data: experiences
                        data: ['无需经验','1年经验','2年经验','3-4年经验','5-7年经验','8-9年经验','10年以上经验']
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: 'minmoney',
                        data: avg_minmoneys

                    },
                        {
                            // 根据名字对应到相应的系列
                            name: 'avgmoney',
                            data: avg_avgmoneys
                        },
                        {
                            // 根据名字对应到相应的系列
                            name: 'maxmoney',
                            data: avg_maxmoneys
                        },
                    ]
                });
            }
        });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function chart_echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartecharts3'));

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            color:['#A6A6A6','#1cc09f'],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                orient: "horizontal",
                left: "12%",
                data: ['minmoney','avgmoney','maxmoney',]
            },
            toolbox: {
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true,
                    axisTick: { //关键设置，坐标轴刻度也不显示
                        show: false
                    },
                },
                data: []
            },
            yAxis: {
                type: 'value',
                axisLine: { //关键设置，不显示X轴线条
                    show: false
                },
            },
            series: [
                {
                    name: 'minmoney',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle:{
                        normal:{
                            width: 3,
                            borderColor:'black'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#000000',//拐点边框颜色
                            borderWidth: 1//拐点边框大小
                        }
                    },
                    data: []
                },
                {
                    name: 'avgmoney',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle:{
                        normal:{
                            width: 3,
                            borderColor:'black'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#000000',//拐点边框颜色
                            borderWidth: 1//拐点边框大小
                        }
                    },
                    data: []
                },
                {
                    name: 'maxmoney',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle:{
                        normal:{
                            width: 3,
                            borderColor:'red'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#000000',//拐点边框颜色
                            borderWidth: 1//拐点边框大小
                        }
                    },
                    data: []
                },
            ]
        };
        // 定义x、y轴数据数组
        var searchURL = window.location.search;
        searchURL = searchURL.substring(1, searchURL.length);
        var chart = searchURL.split("=")[1];
        var educations=[];
        var avg_minmoneys=[];
        var avg_avgmoneys=[];
        var avg_maxmoneys=[];
        //请求后台数据
        $.ajax({
            type : "post",
            async : true,
            url: "/chart/education-money/"+chart,
            dataType : "json",
            contentType: "application/json",
            success: function(res){
                console.log(res);
                for (var i = 0; i < res.length ; i++) {
                    educations.push(res[i].education);
                    avg_minmoneys.push(res[i].avg_minmoney);
                    avg_avgmoneys.push(res[i].avg_avgmoney);
                    avg_maxmoneys.push(res[i].avg_maxmoney);
                }
                myChart.setOption({
                    xAxis: {
                        data: educations
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: 'minmoney',
                        data: avg_minmoneys
                    },
                        {
                            // 根据名字对应到相应的系列
                            name: 'avgmoney',
                            data: avg_avgmoneys
                        },
                        {
                            // 根据名字对应到相应的系列
                            name: 'maxmoney',
                            data: avg_maxmoneys
                        },
                    ]
                });
            }
        });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function chart_echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartecharts4'));
        option = {

        }
        //请求后台数据
        var searchURL = window.location.search;
        searchURL = searchURL.substring(1, searchURL.length);
        var chart = searchURL.split("=")[1];
        var education = [];
        $.ajax({
            type : "post",
            async : true,
            url: "/chart/education/"+chart,
            dataType : "json",
            contentType: "application/json",
            success: function(res){
                console.log("res",res);
                for (var i = 0; i < res.length ; i++) {
                    education.push(res[i].name);
                }
                myChart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    color: ['#749f83','#91c3ae','#1cc09f','#69d9c2','#6a7985','#96a29a','#84a2b9','#a6a6a6'],
                    toolbox: {
                        feature : {
                            dataView : {show: true, readOnly: false},
                            saveAsImage : {show: true}
                        }
                    },
                    legend: {
                        orient: "horizontal",
                        left: "15%",
                        // data: education
                        data:['在校生/应届生','初中','高中','中专','大专','本科','硕士','博士']
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: res
                        }
                    ]
                });
            }

        });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

})